import React, { useState, useEffect, useRef } from "react";
import loading from "./images/loading.webp";
import error from "./images/error.webp";

interface PropsType {
  width?: number;
  height?: number;
  src: string;
}

const Index: React.FC<PropsType> = ({ width = 120, height = 100, src }) => {
  // 图片路径 默认值占位图
  const [url, setUrl] = useState(loading);
  // 图片
  const img = useRef<HTMLImageElement | null>(null);

  useEffect(() => {
    // 新建一个监听元素距离窗口的对象
    const intersectionObserver = new IntersectionObserver(function (entries) {
      // entries是一个数组  数据里面放着每一个被监听的元素
      entries.forEach((v) => {
        // v 是每一项
        // 是否在视口之外
        if (v.intersectionRatio <= 0) return;

        // 在视口之内

        // 懒加载图片
        const imgEl = new Image();
        imgEl.src = src;
        imgEl.addEventListener("load", () => {
          setUrl(src);
        });
        imgEl.addEventListener("error", () => {
          setUrl(error);
        });
        // 结束监听
        if (img.current) intersectionObserver.unobserve(img.current);
      });
    });

    // 图片存在
    if (img.current) {
      // 添加监听的元素
      intersectionObserver.observe(img.current);
    }
  }, []);

  return <img ref={img} src={url} alt="" width={width} height={height} />;
};

export default Index;
